<template>
  <!-- intro-section -->
  <section id="intro-wrap" class="intro2Wrap text-white text-center">
    <b-container>
      <b-row class="text-center">
        <b-col sm="12">
          <div class="intro2subtitle">
            <h3 class="font-weight-bold mb-3 text-white">http://MrPP.com</h3>
          </div>
          <h1
            class="
              intro2Title
              font-weight-bold
              text-42
              t-shadow
              mb-3
              text-white
            "
          >
            混合现实编程平台
            <b-button variant="outline-primary" v-if="user == null"
              >注册</b-button
            >
          </h1>
          <div class="intro2Description text-18">
            <p class="mb-4" v-if="user == null">
              最棒的混合现实/增强现实程序开发平台,帮助您快速生成HoloLens/iPad上面的MR/AR程序,不需要任何编程经验就可以把脑中的想法呈现出来。
            </p>
            <p class="mb-4" v-if="user != null">
              欢迎回来：{{ user.username }}。
            </p>
          </div>

          <div class="intro2Buttons mb-5">
            <a
              name=""
              id=""
              href="#"
              @click="quit()"
              to="/"
              class="
                btn
                half-button
                btn-outline-white btn-lg
                pl-5
                pr-5
                pb-2
                mr-2
                mb-4
                text-uppercase
              "
              role="button"
            >
              关闭界面
            </a>

            <router-link
              id=""
              href=""
              class="
                btn
                half-button
                btn-warning btn-lg
                pl-5
                pr-5
                pb-2
                mb-4
                text-uppercase
              "
              role="button"
              to="/login"
              v-if="user == null"
              >登录</router-link
            >

            <button
              id=""
              class="
                btn
                half-button
                btn-outline-white btn-lg
                pl-5
                pr-5
                pb-2
                mb-4
                text-uppercase
              "
              role="button"
              v-if="user != null"
              @click="logout"
            >
              登出账户
            </button>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <div class="overlay"></div>
  </section>

  <!-- end::intro-section -->
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {},
})
export default class Intro extends Vue {
  private exit: string =
    "mrpp://execute?input=" + encodeURI(JSON.stringify({ command: "exit" }));

    
  public quit(){
    const temp:any = window;
    if (temp.vuplex) {
      temp.vuplex.postMessage({ type: 'execute', json: JSON.stringify({ command: "exit" }) });
    }


  }
  public logout() {
    this.$cookies.remove("user");
    this.$store.commit("setUser", null);
  }
  // Declared as computed property getter
  get user() {
    if(this.$store.state.user){
        return this.$store.state.user;

    }else{
        if(this.$cookies.isKey('user')){
           // console.log(this.$cookies.get('user'));
            var user = this.$cookies.get('user');
            this.$store.commit('setUser', user);
            return this.$store.state.user;
        }
        


    }
    console.log("no no no ");
    return null;
  }
}
</script>
